<template>
	<view class="" style="width: 100vw;height: 100vh">
	<!-- <view 
	style="min-height: 100vh">
		<image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image> -->
	<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
	
		<hx-navbar title="积分商城" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden" transparent="auto"></hx-navbar>
		<view class="wrapper">
			<view  v-if = "ktheme != 'purple'">
					<view  style="width: 100%;height: auto;" >
						<image src="/static/shop/gearWheel.png" style="width: 84%;height:80vw;margin-left: 8%;" mode="" ></image>
					</view>
					<view class="header" >
						<view class="cont" >
							<view class="point" :style="pointsback" style="margin-top: -50%;">
								<view class="num_black">
									<view class="box_black">
										<view class="box2_black">
											<view class="label" style="color: #ffffc9;">可用积分</view>
											<image src="/static/user//wenhao.png" style="width: 28rpx;height: 28rpx;margin-top: 27rpx;" mode="" @click="getwenhao()"></image>
										</view>
										<view class="mx_black" style="color: #ffffc9;" @click="gainpoinIntegraldetail()">积分明细</view>
									</view>
									<view class="text_black">{{point}}</view>
									<view>
										<image src="/static/shop/cloud.png" style="width: 90%;height: 120rpx;margin-left: -6%;"></image>
										<view class="jf_black" @click="gainpoints()">获取积分</view>
									</view>
								</view>
							</view>
							<view class="menu">
								<view class="list" :style="[selStyle]" style="margin-top: 20rpx;">
									<template v-for="(item, index) in menusblack">
										<view class="item" :style="[selStyle]" :key="index" @click="toPath(item.url)">
											<image src="/static/shop/frame.png" mode="scaleToFill"></image>
											<image style="width: 50rpx;height: 50rpx;margin-top: -70rpx;" :src="item.icon" mode="scaleToFill"></image>
											<view class="label" style="margin-top: 25rpx;">{{item.name}}</view>
										</view>
									</template>
								</view>
							</view>
						</view>
					</view>
					<view class="contentblack" :style="{minHeight: scrollHeight}" >
						<view class="box">
							<view class="blankheard">
								<image class="title" src="/static/shop/left.png" style="margin:40rpx 20rpx 0 0;" mode="scaleToFill"></image>
								<view class="text_black" style="color: #D0D0D0;">数字商品</view>
								<image class="title" src="/static/shop/right.png" style="margin:40rpx 0 0 20rpx;" mode="scaleToFill"></image>
							</view>
							<view class="list_black" >
								<template v-for="(item, index) in list" >
									<view class="item_black" :style="[selStyle]" :key="index" >
										<view class="cover_black">
											<image :src="item.image" mode="aspectFill"></image>
										</view>
										<view class="info_black">
											<view class="price_black">
												<text style="color: #fff;float: left;font-size: 40rpx;">{{item.exchange_point}}积分/份</text>
												<view class="dh_black" @click="toDetail(item.id)">点击兑换</view>
											</view>
										</view>
									</view>
								</template>
							</view> 
						</view>
						<view class="none" style="text-align: center;" v-if='list.length===0'>
					    	<image src="@/static/without.png" style="width:550rpx;margin: 10rpx auto;" alt="" mode="widthFix"></image> 
					    	</view>
					</view>
				</view>
			
			<view v-else>
					<view class="header">
							<view class="cont">
								<view class="point" :style="pointsback">
									<image class="icon" src="/static/shop/point_icon.png" mode="scaleToFill"></image>
									<view class="num">
										<view class="text">{{point}}</view>
										<view class="label">可用积分</view>
									</view>
								</view>
								<view class="menu">
									<image class="menuBg" src="/static/shop/menu_bg.png" mode="scaleToFill"></image>
									<view class="list" :style="[selStyle]">
										<template v-for="(item, index) in menus">
											<view class="item" :style="[selStyle]" :key="index" @click="toPath(item.url)">
												<image :src="item.icon" mode="scaleToFill"></image>
												<view class="label">{{item.name}}</view>
											</view>
										</template>
									</view>
								</view>
							</view>
						</view>
						<view class="content" :style="{minHeight: scrollHeight}" >
							<image class="title" src="/static/shop/shop_title.png" mode="scaleToFill"></image>
							<view class="list" >
								<template v-for="(item, index) in list" >
									<view class="item" :style="[selStyle]" :key="index" @click="toDetail(item.id)">
										<view class="cover">
											<image :src="item.image" mode="aspectFill"></image>
										</view>
										<view class="info">
											<view class="name">{{item.name}}</view>
											<view class="tip" :style="[selStyle]">已兑{{item.has_num}}/库存{{item.num}}</view>
											<view class="price">
												<image src="/static/shop/price_icon.png" mode="scaleToFill"></image>
												<text>{{item.exchange_point}}</text>
											</view>
										</view>
									</view>
								</template>
					        	
							</view> 
							<view class="none" style="text-align: center;" v-if='list.length===0'>
					        	<image src="@/static/without.png" style="width:550rpx;margin: 10rpx auto;" alt="" mode="widthFix"></image> 
					        	</view>
						</view>
				</view>
			
		</view>
	</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				selStyle: {
								'--selectColorSize': this.$store.state.selectColorSize, //字体颜色
								'--buttonBcak': this.$store.state.buttonBcak,
								'--borderSty': this.$store.state.borderSty,
							},
				scrollHeight: 0,
				menus: [
					{
						icon: '/static/shop/menu_icon1.png',
						name: '全部商品',
						url: '/pages/shop/list'
					},
					{
						icon: '/static/shop/menu_icon2.png',
						name: '积分明细',
						url: '/pages/shop/point'
					},
					{
						icon: '/static/shop/menu_icon3.png',
						name: '获取积分',
						url: 'home'
					},
					{
						icon: '/static/shop/menu_icon4.png',
						name: '兑换记录',
						url: '/pages/shop/convert'
					}
				],
				menusblack: [
					{
						icon: '/static/shop/menu_black1.png',
						name: '全部商品',
						url: '/pages/shop/list'
					},
					{
						icon: '/static/shop/menu_black2.png',
						name: '积分明细',
						url: '/pages/shop/point'
					},
					{
						icon: '/static/shop/menu_black3.png',
						name: '获取积分',
						url: 'home'
					},
					{
						icon: '/static/shop/menu_black4.png',
						name: '兑换记录',
						url: '/pages/shop/convert'
					}
				],
				point: '0.00',
				list: [
					// //测试数据
					// {
					// 	image:'/static/shop/ludburg.png',
					// 	name:'ddd',
					// 	has_num:2,
					// 	num:3,
					// 	exchange_point:'444',
					// },
					// {
					// 	image:'/static/shop/ludburg.png',
					// 	name:'ddd',
					// 	has_num:22,
					// 	num:32,
					// 	exchange_point:'444333',
					// }
				],
				list1: [],
				page: 1,
				limit: 10,
				last: false,
				
				background:'',
				pointsback:'',
			};
		},
		onLoad() {
			//根据主题更改
			if(this.ktheme != 'purple'){//黑色
				// this.background = {'backgroundImage': 'url("/static/shop/gearWheel.png")','background-size':'100% 100%'}//,'margin':'0px 25px 0px 25px'
				this.pointsback = {'border-radius': '5px','width': '100%','height': '55%','backdrop-filter': 'blur(2px)'}
			}else{
				this.pointsback = {'background-color': '#fff'}
			}
		},
		onShow() {
			if (this.$db.get('userToken')) {
				this.$api.getIntegralBalance({}, res => {
					if (res.status) {
						this.point = res.data.balance;
					}
				});
			}
			this.page = 1;
			this.getShopList();
		},
		mounted() {
			let _this = this;
			uni.getSystemInfo({
				success: res => {
					const query = uni.createSelectorQuery();
					query.select('.content').boundingClientRect();
					query.exec(data => {
						_this.scrollHeight = res.windowHeight - data[0].top + 'px';
					});
				}
			});
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getShopList();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 300);
		},
		onReachBottom() {
			if (!this.last) {
				this.page++;
				this.getShopList();
			}
		},
		methods: {
			// 获取商城列表
			getShopList() {
				this.$api.getShopList({
					page: this.page,
					limit: this.limit
				}, res => {
					console.log(res)
					if (res.status) {
						if (res.data.length == 0) return this.last = true;
						if (this.page == 1) {
							this.list = res.data;
						} else {
							this.lsit = [...this.list, ...res.data];
						}
					}
				});
			},
			toPath(url) {
				if (url == 'home') {
					uni.switchTab({
						url: '/pages/index/index'
					});
					return;
				}
				uni.navigateTo({
					url: url
				});
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/shop/detail?id='+id
				});
			},
			//积分明细
			gainpoinIntegraldetail(){
				uni.navigateTo({
					url: '/pages/shop/point'
				});
			},
			//获取积分
			gainpoints(){
				uni.switchTab({
					url: '/pages/index/index'
				});
				return;
			},
			//问号
			getwenhao(){
				uni.showToast({
					title: '敬请期待...',
					icon: 'none'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
		.wrapper {
		padding: 40rpx 0 0;
		position: relative;
		z-index: 2;
		.header {
			width: 100%;
			height: 400rpx;
			padding: 0 30rpx 40rpx;
			.cont {
				width: 100%;
				.point {
					width: 643rpx;
					height: 179rpx;
					// background-color: #fff;
					box-shadow: 0 -4rpx 6rpx 1rpx rgba(200,232,194,0.32);
					border-radius: 30rpx 30rpx 0 0;
					position: relative;
					z-index: 2;
					margin: 0 auto;
					.icon {
						width: 262rpx;
						height: 161rpx;
						display: block;
						position: absolute;
						right: 20rpx;
						bottom: 0;
					}
					.num {
						padding: 10rpx 0 0 42rpx;
						position: relative;
						z-index: 2;
						.text {
							font-size: 78rpx;
							color: #333;
							font-weight: bold;
						}
						.label {
							font-size: 28rpx;
							color: #666;
						}
					}
					//黑色主题
					.num_black {
						padding: 10rpx 0 0 42rpx;
						position: relative;
						z-index: 2;
						display: flex;
						flex-direction: column;
						.box_black{
							display: flex;
							justify-content: space-between;
							.box2_black{
								 display: flex;
								.label {
									padding: 22rpx 0 0 0rpx;
									font-size: 28rpx;
									color: #666;
								}
							}
							.mx_black{
								margin-right: 20rpx;
								font-size: 25rpx;
								text-decoration:underline;
							}
						}
						.text_black {
							font-size: 78rpx;
							font-weight: bold;
							color: #ffffc9;
							text-shadow: 0px 0px 7px rgba(52, 255, 204, 0.1);
							background: linear-gradient(180deg, #96BCA2 16%, #CCCE8F 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
						.jf_black{
							font-size: 29rpx;
							color: #000;
							width: 25%;
							line-height: 45rpx;
							text-align: center;
							float: right;
							margin-right: 20rpx;
							background:linear-gradient(#D3D3AC,#C4C46D);
							border-radius: 20rpx;
							margin-top: -60rpx;
						}
					}
				}
				.menu {
					width: 100%;
					height: 234rpx;
					padding: 53rpx 0 0;
					position: relative;
					top: -53rpx;
					z-index: 1;
					.menuBg {
						width: 100%;
						height: 100%;
						display: block;
						position: absolute;
						right: 0;
						bottom: 0;
					}
					.list {
						width: 100%;
						padding: 26rpx 0 0;
						display: flex;
						align-items: center;
						justify-content: space-around;
						position: relative;
						z-index: 2;
						.item {
							text-align: center;
							image {
								width: 96rpx;
								height: 96rpx;
								display: block;
								margin: 0 auto;
							}
							.label {
								font-size: 24rpx;
								color: #fff;
								font-weight: 400;
							}
						}
					}
				}
			}
		}
		.content {
			width: 100%;
			background-color: $bg-box;
			border-radius: 16rpx;
			box-shadow: 0 5rpx 26rpx 1rpx rgba(0,0,0, .08);
			padding: 40rpx;
			.title {
				width: 282.5rpx;
				height: 50rpx;
				display: block;
				margin: 0 auto 20rpx;
			}
			.list {
				width: 100%;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: space-between;
				.item {
					width: 325rpx;
					height: 468rpx;
					background-color: #fff;
					border-radius: 20rpx;
					border:var(--borderSty);
					padding: 10rpx;
					margin-top: 16rpx;
					.cover {
						width: 305rpx;
						height: 305rpx;
						image {
							width: 100%;
							height: 100%;
							display: block;
							border-radius: 20rpx;
						}
					}
					.info {
						padding: 14rpx 8rpx 0;
						.name {
							font-size: 28rpx;
							color: #000;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.tip {
							font-size: 20rpx;
							color:var(--selectColorSize);// #FE005A;
							margin: 3rpx 0 13rpx;
						}
						.price {
							display: flex;
							align-items: center;
							justify-content: flex-end;
							image {
								width: 31rpx;
								height: 33rpx;
								display: block;
								margin-right: 5rpx;
							}
							text {
								font-size: 32rpx;
								color: #000;
								font-weight: bold;
							}
						}
					}
				}
				& > view:nth-child(-n+2) {
					margin-top: 0;
				}
			}
		}
		//黑色主题
		.contentblack {
			width: 100%;
			border-radius: 16rpx;
			box-shadow: 0 5rpx 26rpx 1rpx rgba(0,0,0, .08);
			padding: 40rpx;
			.box{
				margin-top: 120rpx;
				box-shadow: 0 -4rpx 6rpx 1rpx rgba(200,232,194,0.32);
				border-radius: 16rpx;
				.blankheard{
					display: flex;
					justify-content: center;
					.title {
						width: 100rpx;
						height: 40rpx;
					}
					.text_black{
						margin-top: 30rpx;
						font-size: 40rpx;
					}
				}
				.list_black {
						width: 90%;
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						justify-content: space-between;
						margin-top: 45rpx;
						margin-left: 5%;
						.item_black {
							width: 100%;
							height: 300rpx;
							border-radius: 20rpx;
							background-image: linear-gradient(to bottom, #518220, transparent);
							border:var(--borderSty);
							padding: 10rpx;
							margin-bottom: 10rpx;
							.cover_black {
								margin-left: 2%;
								margin-top: 15rpx;
								width: 96%;
								height: 210rpx;
								image {
									width: 100%;
									height: 100%;
									display: block;
									border-radius: 20rpx;
								}
							}
							.info_black {
								.name_black {
									font-size: 28rpx;
									color: #000;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}
								.tip_black {
									font-size: 20rpx;
									color:var(--selectColorSize);// #FE005A;
									margin: 3rpx 0 13rpx;
								}
								.price_black {
									display: flex;
									align-items: center;
									justify-content: space-between;
									.dh_black{
										width: 180rpx;
										height: 40rpx;
										margin: 10rpx 20rpx 0 0;
										text-align: center;
										color: #fff;
										background-image: linear-gradient(to bottom, #BBDC69, transparent);
										border-radius: 40rpx;
									}
									text {
										font-size: 32rpx;
										font-weight: bold;
										margin: 10rpx 0 0 30rpx;
										color: #ffffc9;
										text-shadow: 0px 0px 7px rgba(52, 255, 204, 0.1);
										background: linear-gradient(180deg, #96BCA2 16%, #CCCE8F 100%);
										-webkit-background-clip: text;
										-webkit-text-fill-color: transparent;
									}
								}
							}
						}
						& > view:nth-child(-n+2) {
							margin-top: 0;
						}
					}
			}
			
			
		}
		
	}
</style>